<template>
  <div>
    <a-form
      class="w-[70%] mx-auto"
      :label-col="{
        span: 8,
      }"
      v-if="form"
      :model="form.sql"
      :rules="rules"
      ref="formRef"
    >
      <a-form-item :label="t('Data connection')">
        <a-radio-group>
          <a-radio checked>{{ t('Incremental connection') }}</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item :label="t('Data source type')" name="dataBase">
        <a-select v-model:value="form.sql.dataBase" :options="sqlType" allowClear></a-select>
      </a-form-item>

      <a-form-item :label="t('Data source database name')" name="dataBaseName">
        <a-select v-model:value="form.sql.dataBaseName" :options="sqlType" allowClear></a-select>
      </a-form-item>

      <a-form-item :label="t('Data source IP')" name="ip">
        <a-input v-model:value="form.sql.ip" allowClear></a-input>
      </a-form-item>

      <a-form-item :label="t('Data source port')" name="port">
        <a-input v-model:value="form.sql.port" allowClear></a-input>
      </a-form-item>

      <a-form-item :label="t('Data source username')" name="sa">
        <a-input v-model:value="form.sql.sa" allowClear></a-input>
      </a-form-item>

      <a-form-item :label="t('Data source password')" name="password">
        <a-input v-model:value="form.sql.password" allowClear></a-input>
      </a-form-item>
    </a-form>

    <a-divider></a-divider>

    <div class="text-center">
      <a-button-group>
        <a-button @click="prevStep">{{ t('Previous step') }}</a-button>
        <a-button @click="nextStep">{{ t('Next step') }}</a-button>
      </a-button-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { dataConfig } from '@/api/modules';
import { fieldsDropdownList } from '@/data/data';
import { message } from 'ant-design-vue';
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
import { nanoid } from 'nanoid';
import { sqlType } from '../options';
import type { DataConnectionForm } from '../types';

const step = defineModel<number>('step');
const form = defineModel<DataConnectionForm>('form');
const formRef = ref<FormInstance>();
const { t } = useI18n();

const rules: Partial<Record<keyof DataConnectionForm['sql'], Rule[]>> = {
  ip: [{ required: true }],
  port: [{ required: true }],
  sa: [{ required: true }],
  password: [{ required: false }],
  dataBaseName: [{ required: true }],
  dataBase: [{ required: true }],
};

const nextStep = async () => {
  if (!form.value) return;
  try {
    await formRef.value?.validate();
    const { data } = await dataConfig({
      ...form.value.sql,
      dataType: form.value.cashierPlatform,
    });
    let result = data.data;
    if (!result) {
      message.warn('No data source found');
    } else {
      fieldsDropdownList.value = data.data?.map(v => {
        return {
          ...v,
          id: nanoid(),
        };
      });
    }
    step.value!++;
  } catch (error) {
    console.log('run', error);
  }
};

const prevStep = () => {
  step.value!--;
};
</script>

<style lang="scss" scoped></style>
